<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form1">


                <el-form-item label="规格名称" :label-width="formLabelWidth" prop="specsname">
                    <el-input v-model="form.specsname" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item v-for="(item, index) in attrArr" :key="index" label="规格属性" :label-width="formLabelWidth">
                    <el-col :span="18">
                        <el-input v-model="item.value" autocomplete="off"></el-input>
                    </el-col>
                    <el-button @click="add" v-if="index === 0" type="primary">新增规格属性</el-button>
                    <el-button @click="del(index)" v-else type="danger">删除</el-button>

                </el-form-item>



                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { specsAdd, specsInfo, specsEdit } from '@/request/api'
import { successAlert, warningAlert } from '@/utils/alert'
import { mapActions, mapGetters } from 'vuex'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            attrArr: [{ value: '' }], //规格数组
            form: {
                specsname: '',  //商品规格名称
                attrs: '',   //商品规格属性值
                status: 1   //状态1正常2禁用
            },
            rules: {
                specsname: [
                    { required: true, message: '请输入规格名称', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        ...mapActions({
            // 发起规格列表请求
            requestSpecs: 'specs/listActions',
            // 发起规格总数请求
            requestCount: 'specs/countActions'
        }),
        //新增规格属性
        add() {
            this.attrArr.push({ value: '' })
        },
        //新增删除规格属性
        del(index) {
            // console.log(index);
            this.attrArr.splice(index, 1)
        },
        //回显
        getDetail(id) {
            // console.log(id);
            specsInfo({ id }).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    this.form = res.list[0]
                    res.list[0].attrs.map((item, index) => {
                        if (index === 0) {
                            this.attrArr = [{ value: item }]
                        } else {
                            this.attrArr.push({ value: item })
                        }
                        // console.log(res.list[0].attrs);
                    })
                    // this.form.id = id
                }
            })
        },
        //修改
        amend() {
            // 处理规格属性
            if (!this.attrArr.every(item => item.value)) {
                warningAlert('规格属性不能为空');
                return;
            }
            //处理规格属性
            this.form.attrs = this.attrArr.map(item => item.value).join(',');
            specsEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestSpecs()
                }
            })


        },

        close() {
            this.cancel()
        },
        cancel() {
            this.info.isShow = false
            this.form = {
                specsname: '',  //商品规格名称
                attrs: '',   //商品规格属性值
                status: ''   //状态1正常2禁用
            }
            this.$refs.form1.resetFields()
            this.attrArr = [{ value: '' }]
        },
        confirm() {
            this.$refs.form1.validate((val) => {
                if (!val) {
                    return
                }
                // 处理规格属性
                if (!this.attrArr.every(item => item.value)) {
                    warningAlert('规格属性不能为空');
                    return;
                }

                //处理规格属性
                this.form.attrs = this.attrArr.map(item => item.value).join(',');
                //   console.log(this.form);
                specsAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        ///取消弹窗
                        this.cancel()
                        //更新列表
                        this.requestSpecs()
                        //更新总数
                        this.requestCount()
                    }
                })
            })
        },
        opened() {
            //发起管理员列表请求
            this.requestSpecs()
        },
    },
    props: ['info'],
    mounted() { },
    watch: {},
    computed: {},
    filters: {},
    components: {}
}
</script>
<style scoped></style>